// hot.js
Page({
  listData: {},
  // listData:{
  //     projectWeek:[{
  //         imgUrl:'//img.mukewang.com/szimg/623931c3094d1d0c12000676-358-201.jpg',
  //         title:'多端全栈项目实战，大型商业级代驾业务全流程落地'
  //     },{
  //         imgUrl:'//img.mukewang.com/szimg/624fc70f091aca6e12000676-358-201.jpg',
  //         title:'产品经理电商系统实战，全面掌握前后端设计精髓'
  //     },{
  //         imgUrl:'//img.mukewang.com/szimg/62396ac4092a10c712000676-358-201.jpg',
  //         title:'Next.js+React+Node系统实战,搞定SSR服务器渲染'
  //     },{
  //         imgUrl:'//img.mukewang.com/szimg/62551c960932ff5412000676-358-201.jpg',
  //         title:'优秀职场人必修课-职场心理学, 助你走出内耗陷阱'
  //     },{
  //         imgUrl:'//img.mukewang.com/szimg/624d06270938d42f12000676-358-201.jpg',
  //         title:'2022全面升级. Vue3 + TS 仿知乎专栏企业级项目'
  //     },{
  //         imgUrl:'//img.mukewang.com/szimg/609a5219095bb43312000676-358-201.jpg',
  //         title:'2022升级-《慕慕到家》家政小程序组件化进阶实战'
  //     }],
  //     projectMonth:[{
  //         imgUrl:'//img.mukewang.com/szimg/62148a9a090751a812000676-358-201.jpg',
  //         title:'体系课-吃透前端工程化，大厂级实战项目以战带练'
  //     },{
  //         imgUrl:'//img.mukewang.com/szimg/62306eff09a8fede12000676-358-201.jpg',
  //         title:'Vue3+Nuxt3打造SSR网站应用,0到1实现服务端渲染'
  //     },{
  //         imgUrl:'//img.mukewang.com/szimg/6221ccfa094c1e2612000676-358-201.jpg',
  //         title:'C#速成指南--从入门到进阶,实战WPF与Unity3D开发'
  //     },{
  //         imgUrl:'//img.mukewang.com/szimg/620b433009c7059d12000676-358-201.jpg',
  //         title:'2周刷完100道前端优质面试真题'
  //     },{
  //         imgUrl:'//img.mukewang.com/szimg/6124bf9209c0e3b712000676-358-201.jpg',
  //         title:'SpringBoot+Vue3 项目实战，打造企业级在线办公系统'
  //     }],
  //     pathWeek:[{
  //         imgUrl:'//img.mukewang.com/szimg/62306eff09a8fede12000676-358-201.jpg',
  //         title:'Vue3+Nuxt3打造SSR网站应用,0到1实现服务端渲染'
  //     },{
  //         imgUrl:'//img.mukewang.com/szimg/62148a9a090751a812000676-358-201.jpg',
  //         title:'体系课-吃透前端工程化，大厂级实战项目以战带练'
  //     },{
  //         imgUrl:'//img.mukewang.com/szimg/6221ccfa094c1e2612000676-358-201.jpg',
  //         title:'C#速成指南--从入门到进阶,实战WPF与Unity3D开发'
  //     },{
  //         imgUrl:'//img.mukewang.com/szimg/620b433009c7059d12000676-358-201.jpg',
  //         title:'2周刷完100道前端优质面试真题'
  //     },{
  //         imgUrl:'//img.mukewang.com/szimg/6124bf9209c0e3b712000676-358-201.jpg',
  //         title:'SpringBoot+Vue3 项目实战，打造企业级在线办公系统'
  //     }],
  //     pathMonth:[{
  //         imgUrl:'//img.mukewang.com/szimg/62148a9a090751a812000676-358-201.jpg',
  //         title:'体系课-吃透前端工程化，大厂级实战项目以战带练'
  //     },{
  //         imgUrl:'//img.mukewang.com/szimg/62306eff09a8fede12000676-358-201.jpg',
  //         title:'Vue3+Nuxt3打造SSR网站应用,0到1实现服务端渲染'
  //     },{
  //         imgUrl:'//img.mukewang.com/szimg/6221ccfa094c1e2612000676-358-201.jpg',
  //         title:'C#速成指南--从入门到进阶,实战WPF与Unity3D开发'
  //     },{
  //         imgUrl:'//img.mukewang.com/szimg/620b433009c7059d12000676-358-201.jpg',
  //         title:'2周刷完100道前端优质面试真题'
  //     },{
  //         imgUrl:'//img.mukewang.com/szimg/6124bf9209c0e3b712000676-358-201.jpg',
  //         title:'SpringBoot+Vue3 项目实战，打造企业级在线办公系统'
  //     }]
  // },
  data: {
    // 确定头部的默认选中状态
    rankType: undefined,
    // 头部循环列表
    rankTypes: [{
      title: '实战排行',
      type: 'project'
    }, {
      title: '路径排行',
      type: 'path'
    }],
    // 周和月区域默认选中为周
    rankPeriod: undefined,
    // 周和月区域循环列表
    rankPeriods: [{
      title: '周',
      value: 'week'
    }, {
      title: '月',
      value: 'month'
    }],
    currentList:[]
    // currentList:[{
    //     imgUrl:'//img.mukewang.com/szimg/623931c3094d1d0c12000676-358-201.jpg',
    //     title:'多端全栈项目实战，大型商业级代驾业务全流程落地'
    // },{
    //     imgUrl:'//img.mukewang.com/szimg/624fc70f091aca6e12000676-358-201.jpg',
    //     title:'产品经理电商系统实战，全面掌握前后端设计精髓'
    // },{
    //     imgUrl:'//img.mukewang.com/szimg/62396ac4092a10c712000676-358-201.jpg',
    //     title:'Next.js+React+Node系统实战,搞定SSR服务器渲染'
    // },{
    //     imgUrl:'//img.mukewang.com/szimg/62551c960932ff5412000676-358-201.jpg',
    //     title:'优秀职场人必修课-职场心理学, 助你走出内耗陷阱'
    // },{
    //     imgUrl:'//img.mukewang.com/szimg/624d06270938d42f12000676-358-201.jpg',
    //     title:'2022全面升级. Vue3 + TS 仿知乎专栏企业级项目'
    // },{
    //     imgUrl:'//img.mukewang.com/szimg/609a5219095bb43312000676-358-201.jpg',
    //     title:'2022升级-《慕慕到家》家政小程序组件化进阶实战'
    // },{
    //     imgUrl:'//img.mukewang.com/szimg/62148a9a090751a812000676-358-201.jpg',
    //     title:'体系课-吃透前端工程化，大厂级实战项目以战带练'
    // },{
    //     imgUrl:'//img.mukewang.com/szimg/62306eff09a8fede12000676-358-201.jpg',
    //     title:'Vue3+Nuxt3打造SSR网站应用,0到1实现服务端渲染'
    // }]
  },
  onLoad() {
    wx.request({
      url: 'https://mock.mengxuegu.com/mock/67359d8b84647c0f2b3f0fc1/api/getRecomed',
      success: res => {
        const {
          data: {
            data
          }
        } = res;
        // const { projectWeek, projectMonth, pathWeek,pathMonth } = data;
        this.listData = data
        const rankType = wx.getStorageSync('rankType') || 'project'
        const rankPeriod = wx.getStorageSync('rankPeriod') || 'week'
        this.setData({
          rankType,
          rankPeriod
        })
        // const {
        //   rankType,
        //   rankPeriod
        // } = this.data
        this.changeCurrentList(rankType, rankPeriod)
      }
    })
  },
  changeCurrentList(rankType, periodType) {
    let currentList = [];
    if (rankType === 'project' && periodType === 'week') {
      currentList = this.listData.projectWeek;
    } else if (rankType === 'project' && periodType === 'month') {
      currentList = this.listData.projectMonth;
    } else if (rankType === 'path' && periodType === 'week') {
      currentList = this.listData.pathWeek;
    } else {
      currentList = this.listData.pathMonth;
    }
    // 修改一下setData
    this.setData({
      currentList
    });
  },
  // 头部的点击事件
  handleTabChange(e) {
    // 确定一下被点击的原事件的currentTarget.dataset.type
    const rankType = e.currentTarget.dataset.type;
    const {
      rankPeriod
    } = this.data;
    this.setData({
      rankType
    });
    wx.setStorage({
      key:"rankType",
      data:rankType,
    })   //本地存储
    this.changeCurrentList(rankType, rankPeriod)
  },
  // 周和月的点击事件
  handlePeriodChange(e) {
    const rankPeriod = e.currentTarget.dataset.type;
    const {
      rankType
    } = this.data;
    this.setData({
      rankPeriod
    });
    wx.setStorage({
      key:"rankPeriod",
      data:rankPeriod,
    })   //本地存储
    this.changeCurrentList(rankType, rankPeriod)
  }
})